<template>
<swiper ref= "mySwiper" :options= "swiperOptions">
    <!--一个swiper-slide包裹一个块，轮播几个块就设置几个swiper-slide，把9个icon拆分成2个块-->
    <swiper-slide v-for= '(page, index) in pages' :key= 'index'>
        <div class="header-icons">
            <!-- 不能写page in pages[page],因为这里的page代表pages[page]-->
            <div
                class="icons-container"
                v-for= 'item in page'
                :key= 'item.id'>
                <img class= "icons-img" :src= "item.imgUrl"><div class="icons-text">{{item.desc}}</div>
            </div>
        </div>
    </swiper-slide>
 </swiper>
</template>
<script>
export default {
    name: 'home-icons',
    data() {
        return {
            swiperOptions: {
                pagination: '.swiper-pagination', //class名
                autoplay: false
            }
        }
    },
    props: {
        iconList: Array
    },
    computed: {
        pages () {
            const pages = []
            this.iconList.forEach((item, index) => {
                const page = Math.floor(index / 8)
                // 如果pages[page]是空，pages[page]变成数组，如果直接写pages[page]=[],每次循环都会变为空数组，之前的数据不能保存
                if (!pages[page]) {
                    //把pages变为二维数组，利用pages[page]数组储存一个swiper-slide中的8个icon
                    pages[page] = []
                }
                pages[page].push(item)
            })
            return pages
        }
    }
}
</script>

<style lang= "stylus" scoped>
@import '../../../assets/styles/varibles.styl';
@import '../../../assets/styles/maxins.styl';
*
    margin 0
    padding 0
    box-sizing border-box
    .header-icons
        padding-bottom 50%
        height 0
        overflow hidden
        display flex
        flex-flow wrap
        .icons-container
            height 0
            width 25%
            padding-bottom 25%
            position relative
            display flex
            flex-direction column
            align-items center
            overflow hidden
            /* 不能写justify-content,因为没有高度，*/
            .icons-img
                margin-top .15rem
                width 1rem
                height 1rem
                margin-bottom .12rem
            .icons-text
                font-size .32rem
                height .32rem
                line-height .32rem
                text-align center
                color $darkTextColor
                /* ellipsis()overflow有问题。。。 */
</style>
